import React, { useState, useEffect } from 'react'
import Tabbar from '@/components/TabBar'
import HomeHeader from './components/HomeHeader'
import './assets/css/style.scss'
import {  Swiper, SpinLoading, Grid  } from 'antd-mobile'
import {  fetchHomeBanner, fetchItems, fetchCates } from '@/api'
import InfiniteScroll from 'react-infinite-scroll-component'
import Items from './components/Items'
import { useNavigate, useDispatch } from 'umi'
export default function index() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  // 首页banner
  const [banners, setBanners] = useState<number[]>([])
  const getHomeBanners = () => {
    fetchHomeBanner().then((res: { data: { code: number; data: React.SetStateAction<number[]> } }) => {
      if(res.data.code === 0) {
        setBanners(res.data.data)
      }
      
    })
  }
   // 首页banner

  //  首页推荐商品
  const [items, setItems] = useState<any[]>([]);
  // 商品是否还有数据
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);
  const reachBottom = () => {
    // 上拉触底事件
    setPage(page+1)
  }
  // 上拉加载监听page变化重新发送请求
  useEffect(() => {
    getItems();
  }, [page])
  const getItems = () => {
   fetchItems({
      page,
      pageSize: 5
    }).then((res: { data: { code: number; data: { result: React.SetStateAction<any[]> } } }) => {
      if (res.data.code === 0) {
        setItems([
          ...items,
          ...res.data.data.result
        ])
      }
      if(res.data.code === 700) {
        // 没有数据
        setHasMore(false)
      }
    })
  }
  // 首页推荐商品
  
  // 宫格导航数据
  const [cates, setCates] = useState([]);
  const getCates = () => {
    fetchCates().then(res => {
      if (res.data.code === 0) {
        setCates(res.data.data)
      }
    })
  }
  // 点击商品图标 添加到购物车
  const addCartItem = (id: number) => {
    dispatch({
      type: 'cart/addItem',
      data: {
        goodsId: id,
        number: 1
      }
    })
  }
  useEffect(() => {
    getHomeBanners();
    getCates();
  }, [])
  return (
    <>
      <HomeHeader/>
      <div className="container">
        {/* 轮播 */}
        <Swiper 
          loop
          autoplay
        >
          {
            banners.map(banner => {
              return (
                <Swiper.Item key={banner.id}>
                <img src={banner.picUrl} alt="" />
              </Swiper.Item>
              )
            })
          }
          
          
          
        </Swiper>
        {/* /轮播 */}
        {/* 宫格导航 */}
        <Grid columns={5} gap={5}>
          {
            cates.map(cate => (
              <Grid.Item key={cate.id}>
                <div className='grid-tab' onClick = {
                  () => {
                    navigate(`/itemLists?cateId=${cate.id}`)
                  }
                }>
                  <img className='tab-icon' src={cate.icon} alt="" />
                  <div>{cate.name}</div>
                </div>
              </Grid.Item>  
            ))
          }
          
          
        </Grid>
        {/* 宫格导航 */}
        {/* 推荐商品 */}
        <InfiniteScroll
           dataLength={items.length} //This is important field to render the next data
           next={reachBottom}
           hasMore={hasMore}
           loader={
            <div style={{display: 'flex', justifyContent: 'center'}}>
              <SpinLoading color='primary' />
            </div>
           }
           endMessage={
             <p style={{ textAlign: 'center' }}>
               <b>我也是有底线的</b>
             </p>
           }
        >
          <Items items={items} clickItems={
            (id: number) => {
              navigate(`/detail/${id}`)
            }
          } clickCartIcon={ 
            (id: number) => {
              addCartItem(id)
            }
           }/>
        </InfiniteScroll>
        {/* /推荐商品 */}
      </div>
      <Tabbar/>
    </>
  )
}
